<template>
    <div id="app">


        <Loading/>
        <Menu/>
        <Contact/>

        <transition v-bind:css="false" mode="out-in" @enter="enter" @leave="leave" v-on:before-leave="beforeLeave">
            <router-view class="aaa" :key="$route.fullPath"/>
            <!-- @mywatch1="beforeLeave" @mywatch2="enter"-->
        </transition>
        <CustomCursor/>

        <div id="maskFx">
            <canvas id="fxBg" class="bg"></canvas>
            <div id="fxIco"><img src="./assets/images/icon/lodging.svg"></div>
        </div>
    </div>
</template>

<style lang="scss">
#maskFx {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 800;
}

.aaa {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%
}

#fxIco {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
</style>

<script>
import CustomCursor from './components/CustomCursor.vue'
import Loading from './components/Loading.vue'
import Menu from './components/Menu.vue'
import Contact from './components/Contact.vue'
/*
import '../css/jquery.fullPage.css';
import '../css/swiper.css';
import '../css/uikit.css';
import '../css/style.css';
import '../css/css.scss';
*/


//import './jquery.easing.min.js';
import {TweenMax, TimelineMax, gsap, Sine, Quint, Quart} from "gsap";
//import {loadingOver, start} from "./js/loading";


export default {
    name: 'Home',
    components: {
        CustomCursor,
        Loading,
        Menu,
        Contact
    },
    data () {
        return {
            canvas: null,
            context: null,
            show: false,
            width: 0,
            height: 0,
            fx: { x: 0 },
            fxTop: { x: 0 },
            done_fun: null,
            is_done: false,
        };
    },
    computed:{
        gkeys(){
            return this.$route.fullPath;
        }
    },

    methods: {

        beforeLeave: function () {
            $('#app').removeClass('is_home');
            this.done_fun = null;
            this.is_done = false
            TweenMax.set($('#maskFx'), { display: 'block' });
            TweenMax.set($('#transitionLoading'), { left: '100%' });
            TweenMax.fromTo(this.fxTop, 1.0,
                { x: $(window).width() },
                { x: -50, ease: Quint.easeInOut });
            TweenMax.fromTo(this.fx,
                { x: $(window).width() },
                {
                    x: 0,
                    ease: Quint.easeInOut,
                    delay: 0,
                    duration: 1.3,
                    onUpdate: this.animateFxBgIn,
                    onComplete: () => {
                        if (this.done_fun){
                            $(window).scrollTop(0);
                            this.done_fun();
                        } else {
                            this.is_done = true;
                        }
                    }
                });


            TweenMax.fromTo($('#fxIco'), 1.2, { left: `${147 + this.width}px` }, {
                left: '50%',
                ease: Quart.easeInOut
            });
        },
        leave: function (el, done) {
            if (this.is_done) {
                $(window).scrollTop(0);
                done();
            } else {
                this.done_fun = done;
            }
        },
        enter: function () {
            let tl = new TimelineMax()
            tl.fromTo(this.fxTop,
                { x: this.width },
                {
                    x: -50,
                    duration: 1, ease: Quint.easeInOut

                }, 'start').fromTo(this.fx,
                { x: this.width },
                {
                    x: -10,
                    ease: Quint.easeInOut,
                    delay: 0,
                    duration: 1.3,
                    onUpdate: this.animateFxBgOut,
                    onComplete: function () {
                        TweenMax.set($('#maskFx'), { display: 'none' });
                    }
                }, 'start')
            ;

            TweenMax.to($('#fxIco'), 1, {
                left: '-147px', ease: Quart.easeInOut, onComplete: function () {
                }
            });
        },
        animateFxBgIn: function () {
            this.canvas.width   = this.width;
            this.height         = this.canvas.height;

            this.context.fillStyle = "#EBEBEB";
            this.context.beginPath();
            this.context.moveTo(this.width, 0);
            this.context.lineTo(this.fx.x, 0);
            this.context.lineTo(this.fxTop.x, this.height);
            this.context.lineTo(this.width, this.height);
            this.context.closePath();
            this.context.fill();
        },
        animateFxBgOut: function () {
            this.canvas.width = this.width;
            this.height         = this.canvas.height;
            this.context.fillStyle = "#EBEBEB";
            this.context.beginPath();
            this.context.moveTo(0, 0);
            this.context.lineTo(this.fxTop.x, 0);
            this.context.lineTo(this.fx.x, this.height);
            this.context.lineTo(0, this.height);
            this.context.closePath();
            this.context.fill();
        }
    },
    mounted () {
        this.width = $(window).width();
        this.height = $(window).height();
        this.canvas = document.getElementById("fxBg");
        this.context = this.canvas.getContext("2d");
        this.canvas.width = this.width;
        this.canvas.height = this.height;


        $('.index_logo').addClass('active')
        $('.logo_top,.menu_btn').addClass('top0')
        document.onreadystatechange = function () {
        }

        let tl = gsap.timeline({})

        tl.fromTo('#scene_1 .scene_text .scene_inner', { y: '100%' }, {
            y: '0%',
            ease: Sine.easeInOut,
            duration: 1,
            delay: this.transDuration * .5,
            stagger: 0.2
        })

        /*        start()
                loadingOver().then(() => {

                    $('.index_logo').addClass('active')
                    $('.logo_top,.menu_btn').addClass('top0')


                    tl.fromTo('#scene_1 .scene_text .scene_inner', 1, { y: '100%' }, {
                        y: '0%',
                        ease: Sine.easeInOut,
                        delay: this.transDuration * .5,
                        stagger: 0.2
                    })
                })


    */
    }
}
</script>
